"use client"

import { useState } from "react"
import StartPage from "@/components/StartPage"
import GamePage from "@/components/GamePage"
import ResultPage from "@/components/ResultPage"
import SettingsPage from "@/components/SettingsPage"
import { Settings } from "lucide-react"
import type { Library } from "@/types"

export default function Home() {
  const [selectedLibraries, setSelectedLibraries] = useState<Library[]>([])
  const [gameStarted, setGameStarted] = useState(false)
  const [gameFinished, setGameFinished] = useState(false)
  const [showSettings, setShowSettings] = useState(false)
  const [score, setScore] = useState(0)
  const [choiceCount, setChoiceCount] = useState(3)

  const handleStartGame = (libraries: Library[]) => {
    setSelectedLibraries(libraries)
    setGameStarted(true)
  }

  const handleGameFinish = (finalScore: number) => {
    setScore(finalScore)
    setGameFinished(true)
    setGameStarted(false)
  }

  const handleAbandonGame = () => {
    setGameStarted(false)
    setSelectedLibraries([])
    setScore(0)
  }

  const handlePlayAgain = () => {
    setSelectedLibraries([])
    setGameFinished(false)
    setScore(0)
  }

  const handleOpenSettings = () => {
    setShowSettings(true)
  }

  const handleSaveSettings = (newChoiceCount: number) => {
    setChoiceCount(newChoiceCount)
    setShowSettings(false)
  }

  const handleCancelSettings = () => {
    setShowSettings(false)
  }

  return (
    <main className="min-h-screen bg-gradient-to-br from-green-600 to-green-800 flex items-center justify-center p-4">
      <div className="bg-black bg-opacity-30 backdrop-blur-lg rounded-xl shadow-lg p-8 max-w-4xl w-full relative">
        {!gameStarted && !gameFinished && !showSettings && (
          <>
            <StartPage onStartGame={handleStartGame} />
            <button
              onClick={handleOpenSettings}
              className="absolute top-4 right-4 text-white hover:text-green-300 transition-colors"
            >
              <Settings size={24} />
            </button>
          </>
        )}
        {showSettings && (
          <SettingsPage currentChoiceCount={choiceCount} onSave={handleSaveSettings} onCancel={handleCancelSettings} />
        )}
        {gameStarted && (
          <GamePage
            selectedLibraries={selectedLibraries}
            onGameFinish={handleGameFinish}
            onAbandonGame={handleAbandonGame}
            choiceCount={choiceCount}
          />
        )}
        {gameFinished && <ResultPage score={score} onPlayAgain={handlePlayAgain} />}
      </div>
    </main>
  )
}

